How to Report Errors in Forms: 10 Design Guidelines 表單的錯誤報告

幫助使用者從錯誤中恢復,關鍵在於清晰地識別問題並方便使用者定位和修正錯誤的欄位。系統狀態的可見性(Visibility of System Status)是良好使用者體驗的基礎:表單設計應使使用者明確看到錯誤,理解問題,並方便地採取糾正措施。

1. 儘量使用行內驗證 (Inline Validation)

理想情況下,應在使用者完成每個欄位的填寫後立即顯示驗證資訊。如果該欄位存在錯誤,旁邊應出現指示,這樣使用者可以立即進行修改,避免返回修正之前填寫的欄位。這種行內驗證會顯著降低使用者的互動成本,幫助使用者更快完成表單填寫。

2. 對複雜欄位的正確輸入提供成功提示

行內驗證也可用於提示覆雜欄位的成功輸入。例如,在要求建立獨特使用者名稱時,綠色對勾及“使用者名稱可用”提示可以明確告知使用者可以繼續。對於輸入要求較複雜的欄位(如密碼),即時的密碼強度指示能夠幫助使用者更輕鬆地確認密碼是否符合系統標準。

3. 將錯誤資訊放置在欄位旁

即便未使用行內驗證,也應將錯誤提示放在問題欄位旁邊,或正下方。這樣的錯誤提示能降低使用者的工作記憶負擔,讓他們在看到提示的同時更方便地修改錯誤。

4. 使用顏色區分錯誤與正常狀態

使用顏色來突出錯誤狀態(如紅色),併為錯誤欄位新增半透明的背景色,這樣能在頁面較長或欄位較多的情況下,幫助使用者快速找到問題所在。

5. 增加圖示或微妙的動畫效果,便於使用者快速定位錯誤

除了顏色外,還可以在錯誤提示旁新增圖示(如警告圖示),幫助使用者尤其是色盲使用者更好地識別錯誤。適度的動畫(如輕微的脈動或跳動)也可幫助使用者快速定位,但避免動畫過多或文字動畫,以免造成視覺負擔。

Adobe.com:錯誤訊息旁邊的紅色和圖示引起了使用者的注意。

6. 謹慎使用模態框或確認對話方塊

如果需要特別提示潛在錯誤,可以使用模態框(modal)或確認對話方塊,但要謹慎使用。模態框會打斷使用者流程,並要求關閉視窗才能修正錯誤,增加了使用者的認知負荷。因此,模態框適合用於提示簡單錯誤或可忽略的錯誤情況。

Gmail.com 使用模態視窗警告使用者附件缺失。這種錯誤呈現方式是合適的,因為錯誤訊息相當簡單,使用者可以選擇在不包含附件的情況下繼續操作。

7. 不要在輸入未完成時進行驗證

通常情況下,不要在使用者尚未完成輸入時就顯示錯誤提示。應等待使用者完成輸入並離開欄位後再提示錯誤,避免在使用者輸入過程中反覆彈出錯誤訊息,從而增加使用者的焦慮和負擔。

BestBuy.com上下訂單時,從“電子郵件地址”欄位離開後,該欄位上出現了一條錯誤訊息。然而,返回去修復該錯誤時,“電話號碼”欄位上又出現了另一個錯誤,儘管使用者尚未在該欄位中開始輸入。

8. 不要只用驗證摘要顯示錯誤

驗證摘要通常出現在表單頂部,概述所有需修正的錯誤。雖然有助於使用者全面瞭解表單中的問題,但不應僅使用驗證摘要來顯示錯誤,因為這會迫使使用者在表單中尋找錯誤欄位,增加了修改的難度。驗證摘要應與欄位旁的具體錯誤提示結合使用,以便使用者快速修正。

SurveyMonkey 在表單頂部以及導致錯誤的特定欄位下方提供了錯誤訊息。

9. 不要用工具提示報告錯誤

避免使用工具提示(tooltip)或彈出氣泡來顯示錯誤提示。使用者可能難以注意到這些提示或不知道如何操作才顯示錯誤資訊。工具提示不應用於表單錯誤的提示,因為它增加了使用者的操作步驟,使使用者需額外點選或懸停才能看到錯誤提示。

Facebook.com:登入檔單中的錯誤以警示圖示顯示。使用者必須點選每個圖示才能檢視問題所在。在這個例子中,雖然錯誤很容易推斷出來,但如果欄位已填寫,就會更難推斷。

10. 為重複錯誤提供額外幫助

當使用者在填寫表單時多次出現相同錯誤(通常超過3次),表明使用者介面設計存在嚴重問題。這可能意味著錯誤提示資訊不夠清晰或設計與使用者需求不符。我們建議對重複性錯誤的資料進行分析,最佳化設計或重新編寫提示資訊。如暫時無法解決問題,可為使用者提供更詳細的幫助連結或檔案。

錯誤處理流程應幫助使用者快速定位和修正錯誤,並提供避免同類錯誤的建議。透過簡化使用者對錯誤資訊的理解和操作,可有效降低認知負擔,幫助使用者專注於任務的順利完成。